<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>牧心农业</title>
    <link rel="stylesheet" type="text/css" href="/static/css/eui.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/mobile.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/iconfont.css" />
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/doT.min.js"></script>
    <script src="/static/js/func.js"></script>
</head>
<body>
    <div class="content margin_top">
        <header class="header fixed_top bg_mx_green"></header>
        <form class="price_track">
            <div class="price_track_content"></div>
            <div class="bg_white margin_b_10">
                <div class="flex border_b padding_10_15 border_b">
                    <div class="width_70">其他</div>
                </div>
                <div class="text_info padding_10_15 border_b">
                    <textarea name="pighouseinfo" placeholder="请输入其他" request title="其他"></textarea>
                </div>
                <div class="padding_15">
                    <div class="preview flex_row_3 margin_b_10"></div>
                    <div class="light lineheight_3 v_center input">
                        <div class="width_50 border text_center">
                            <div class="iconfont icon-add font_20"></div>
                            <input class="absolute all" type="file" value="" accept="image/*" style="opacity:0;" onchange="selectpic(this)"/>
                            <input type="hidden" name="img" value=""/>
                            <input type="hidden" name="pigid">
                        </div>
                        <div class="left_50  padding_l_15">点击上传图片</div>
                    </div>
                </div>
            </div>
            <div class="padding_15 font_16">
                <button class="btn btn_mx_green all_width lineheight_3">保存</button>
            </div>
        </form>
    </div>
    <div class="toast"></div>
    <!-- toast模版 -->
    <script type="text/template" charset="utf-8" id='toast_template'>
        <i class="iconfont icon-toast{{=it.icon}}"></i>
        <div class="toast_text">{{=it.text}}</div>
    </script>
    <script type="text/template" charset="utf-8" id='info_template'>
        <div class="bg_white margin_b_10 padding_10_15">
            <div class="font_15 h_justify">
                <span>编号：{{=it.no}}</span>
                <span class="warning">总价：{{=it.total_price.toFixed(2)}}元</span>
                <input type="hidden" name="total_price" value="{{=it.total_price.toFixed(2)}}">
                <input type="hidden" name="weight" value="{{=it.weight.toFixed(2)}}">
                <input type="hidden" name="price" value="{{=it.price.toFixed(2)}}">
            </div>
            <div class="light font_12">
                <span>净重：{{=it.weight.toFixed(2)}}kg</span>
                <span class="padding_l_15">均价：{{=it.price.toFixed(2)}}元/kg</span>
            </div>
        </div>
        <div class="bg_white margin_b_10 padding_10_15 lineheight_2 font_12" style="max-height:300px;overflow:auto;">
            <div class="flex">
                <div class="col_4 padding_h_5">编号</div>
                <div class="col_4 padding_h_5">名称</div>
                <div class="col_2">重量(kg)</div>
                <div class="col_2">价格(元)</div>
            </div>
            <div class="price_list">
                {{for(var i=0;i<it.records.length;i++){}}
                <div class="flex price_one">
                    <div class="col_4 margin_5">宰<span class="record_no">{{=it.records[i].no}}</span></div>
                    <div class="col_4 border margin_5 padding_h_5">
                        <input class="font_12" type="text" name="type[]" value="{{=it.records[i].type}}">
                    </div>
                    <div class="col_2 border margin_5 padding_h_5">
                        <input class="font_12" type="text" name="weight[]" value="{{=it.records[i].weight||''}}" data-pattern="^[0-9]+(.[0-9]{1,2})?$" data-tips="两位小数">
                    </div>
                    <div class="col_2 border margin_5 padding_h_5">
                        <input class="font_12" type="text" name="price[]" value="{{=it.records[i].price||''}}" data-pattern="^[0-9]+(.[0-9]{1,2})?$" data-tips="两位小数">
                    </div>
                </div>
                {{}}}
            </div>
            <div class="block_inline label_mx_green padding_h_5 margin_5" onclick="addline()">+添加一条</div>
            <div class="block_inline label_mx_green padding_h_5 margin_5" onclick="delline()">-删除一条</div>
        </div>
        <input name="_csrf" type="hidden" id="_csrf" value="<{$app->request->csrfToken}>">
    </script>
    <script type="text/template" charset="utf-8" id='img_template'></script>
    <script>
        // 页面初始化
            var info = <{$detail}>;console.log(info)
            var evalinfo = doT.template($("#info_template").text());
            var evalToast = doT.template($("#toast_template").text());
            loaddata(".price_track_content",evalinfo,info);
            loadheadbar("价格跟踪",1)
        // 增加一行
            function addline(){
                var datas = info.records;
                var len = datas.length;
                if(len && !checkedit()) return false;
                var obj = {no:10000+len+1,type:"",weight:0,price:0};
                info.records.push(obj);
                cal()
            }
        // 删除一行
            function delline(){
                var len = info.records.length;
                info.records.splice(len-1,1);
                cal()
            }
        // 检测编辑内容
            function checkedit(){
                var datas = info.records;
                var len = datas.length;
                var eles = $(".price_one");
                var i = true;
                for (var i = 0; i < len; i++) {
                    var ele = eles.eq(i).find("input");
                    for (var j = 0; j < ele.length; j++) {
                        var pattern = ele.eq(j).data("pattern");
                        var tips = ele.eq(j).data("tips");
                        var re = new RegExp(pattern);
                        if(!ele.eq(j).val()){
                            toast("attention","请输入必要项")
                            ele.eq(j).focus();
                            i = false;
                            return false;
                        }else if(pattern && !re.test(ele.eq(j).val())){
                            toast("attention","请输入"+tips);
                            ele.eq(j).focus();
                            i = false;
                            return false;
                        }
                    }
                    datas[i].type = ele.eq(0).val();
                    datas[i].weight = parseFloat(ele.eq(1).val());
                    datas[i].price = parseFloat(ele.eq(2).val());
                }
                return i;
            }
        // 计算
            function cal(){
                var total = 0,weight = 0,price;
                for (var i = 0; i < info.records.length; i++) {
                    total += info.records[i].weight*info.records[i].price;
                    weight += info.records[i].weight;
                }
                price = total/weight;
                info.total_price = total;
                info.weight = weight;
                info.price = price||0;
                loaddata(".price_track_content",evalinfo,info);
            }
        // 选择图片
            var img_arr=[],imgs=[],evalImg;
            loadimg(function(){
                evalImg = doT.template($("#img_template").text())
            });
            function selectpic(obj){
                var file = obj.files[0];
                var URL = window.URL || window.webkitURL;
                tobase64(file,function(res){
                    imgs.push(res);
                })
                img_arr.push(URL.createObjectURL(file));
                $(".preview").html(evalImg({n:0,d:img_arr}));
                $(obj).val("");
                if(img_arr.length>=3){
                    $(".input").hide();
                }
            }
        // 删除图片
            function del(n,i){
                imgs.splice(i,1);
                img_arr.splice(i,1);
                $(".preview").html(evalImg({n:0,d:img_arr}));
                $(".input").show();
            }
        // 提交表单
            var submited = false;
            $(".price_track").submit(function(e){
                e.preventDefault();
                var pigid = GetQueryString("pigid");
                $("input[name=pigid]").val(pigid);
                if(!checkedit()) return false;
                cal()
                with(this){
                    img.value = imgs.join("%^");
                    for (var i = 0; i < this.length; i++) {
                        if($(this[i]).attr("request")==""){
                            if(!checkone(this[i])){
                                return false;
                            }
                        }
                    }
                    if(submited) return false;
                    var data = $(".price_track").serialize();
                    $.post("/business/person/post-price-track",data,function(res){
                        submited = true;
                        toast("attention",res.msg);
                        if(res.status == 0){
                            location.href="/business/person/pig";
                        }
                    },"json")
                }
            })
    </script>
</body>
</html>
